<template>
	<el-container>
		<div class="right-panel">
			<div class="right-panel-search" style="width: 100%; margin-top: 5px; margin-bottom: 5px">
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">员工编码:</span>
					<el-input v-model="search.empNum" placeholder="请输入员工编码" style="margin-left: 10px; width: 250px"
						clearable></el-input>
				</div>
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">姓名:</span>
					<el-input v-model="search.name" placeholder="请输入姓名" style="margin-left: 10px; width: 250px"
						clearable></el-input>
				</div>
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">时间范围:</span>
					<el-date-picker v-model="search.timeHorizon" type="daterange" range-separator="-"
						start-placeholder="起始时间" end-placeholder="截止时间" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
						:size="size" style="margin-left: 10px; width: 250px !important" />
				</div>
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">岗位:</span>
					<el-input v-model="search.post" placeholder="请输入岗位" style="margin-left: 10px; width: 250px"
						clearable></el-input>
				</div>
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px">部门:</span>
					<el-input v-model="search.dept" placeholder="请输入部门" style="margin-left: 10px; width: 250px"
						clearable></el-input>
				</div>
				<!-- 添加消息类型 -->
				<div class="panel-search-box" style="width: 300px">
					<span class="demonstration" style="margin-left: 10px; margin-right: 5px">消息类型:</span>
					<el-select v-model="value" class="m-2" placeholder="请输入消息类型">
						<el-option v-for="item in msgType" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
				<div
					style="flex: 1; display: flex; justify-content: space-between; align-items: center; padding-right: 20px">
					<div class="panel-search-box">
						<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
						<el-button type="" @click="cleanSearch">清空</el-button>
					</div>
					<el-button type="primary" style="" @click="batchRead">批量已读</el-button>
				</div>
			</div>
		</div>
		<el-header style="display: none"></el-header>
		<el-main class="nopadding">
			<scTable ref="table" :apiObj="apiObj" :params="params" stripe border remoteSort remoteFilter
				@selection-change="selectionChange">
				<el-table-column fixed='left' type="selection" :selectable="displaySelection" width="50"></el-table-column>
				<el-table-column fixed='left' label="员工姓名" prop="name" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column fixed='left' label="员工编码" prop="empNum" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.empNum }}</span>
					</template>
				</el-table-column>
				<el-table-column label="ldap账号" prop="ldap" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.ldap }}</span>
					</template>
				</el-table-column>
				<el-table-column label="变更前部门" prop="deptOld" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.deptOld }}</span>
					</template>
				</el-table-column>
				<el-table-column label="变更后部门" prop="deptNew" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.deptNew }}</span>
					</template>
				</el-table-column>
				<el-table-column label="变更前岗位" prop="postOld" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.postOld }}</span>
					</template>
				</el-table-column>
				<el-table-column label="变更后岗位" prop="postNew" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.postNew }}</span>
					</template>
				</el-table-column>
				<el-table-column label="变更时间" prop="updateTime" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ scope.row.updateTime }}</span>
					</template>
				</el-table-column>
				<el-table-column label="消息类型" prop="msgType" align="center" min-width="150">
					<template #default="scope">
						<span :class="{ read1: scope.row.status !== 0 }">{{ formatStatus(scope.row) }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column label="消息状态" fixed="right" prop="status" align="center" min-width="150">
					<template #default="scope">
						<span :class="scope.row.status == 1 ? 'read1' : 'read2'">{{
							scope.row.status == 0 ? '未读' : '已读'
						}}</span></template
					>:disabled="scope.row.status == 1"
				</el-table-column> -->
				<el-table-column label="操作" fixed="right" align="center" width="150">
					<template #default="scope">
						<el-button-group>
							<el-button :disabled="scope.row.status == 1" type="primary" size="small"
								@click="handleMsg(scope.row)">{{ scope.row.status == 0 ? '未读' : '已读' }}</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</scTable>
		</el-main>
	</el-container>
</template>

<script>
import useTabs from '@/utils/useTabs'

export default {
	name: 'msgList',
	data() {
		return {
			dialog: {
				info: false
			},
			timeHorizon: [],
			search: {},
			apiObj: this.$API.emp.empMsgList,
			params: {},
			ids: [],
			// but: '未读',
			value: '',
			msgType: [
				{
					value: '1',
					label: '离职'
				},
				{
					value: '2',
					label: '入职'
				},
				{
					value: '3',
					label: '岗位变更'
				},
				{
					value: '4',
					label: '部门变更'
				},
				{
					value: '5',
					label: '岗位/部门变更'
				}
			]
		}
	},
	watch: {
		groupFilterText(val) {
			this.$refs.group.filter(val)
		}
	},
	computed: {
		// displaySelection(row) {
		//   return row.status !== 0
		// }
	},
	mounted() { },
	async created() { },
	methods: {
		//任务
		downTemp() {
			// 下载模板
		},
		//编辑
		table_edit(row) {
			this.dialog.edit = true
			this.$nextTick(() => {
				this.$refs.editDialog.open('edit').setData(row)
			})
		},
		//表格内开关
		async changeSwitch(val, row) {
			row.enable = row.enable === 1 ? 0 : 1
			row.$switch_status = true
			let data = {
				enable: val,
				staffNumber: row.staffNumber
			}
			var res = await this.$API.user.user.enable.post({ data: data })
			if (res && res.code === 0) {
				setTimeout(() => {
					delete row.$switch_status
					row.enable = val
					// console.log(typeof val, row)
					this.$message.success('操作成功')
				}, 500)
			}
		},
		//查看
		table_show(row) {
			this.dialog.info = true
			this.$nextTick(() => {
				this.$refs.infoDialog.setData(row)
			})
		},
		upsearch() {
			if (this.search.timeHorizon) {
				this.search.startTime = this.search.timeHorizon[0]
				this.search.endTime = this.search.timeHorizon[1]
			}
			this.search.msgType = this.value
			// console.log(this.search)
			console.log(this.search.msgType)
			// console.log(this.search.msgType)
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
		},
		//批量已读
		async batchRead() {
			var ids = this.ids
			if (ids.length > 0) {
				await this.$API.emp.handleEmpMsg.post({ data: { ids: this.ids } })
				useTabs.refresh()
			}
			this.$refs.table.clearSelection()
		},
		//单条已读
		async handleMsg(row) {
			await this.$API.emp.handleEmpMsg.post({ data: { ids: [row.id] } })
			useTabs.refresh()
			this.$refs.table.clearSelection()
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode === 'add') {
				data.id = new Date().getTime()
				this.$refs.table.tableData.unshift(data)
			} else if (mode === 'edit') {
				this.$refs.table.tableData
					.filter((item) => item.id === data.id)
					.forEach((item) => {
						Object.assign(item, data)
					})
			}
		},
		formatStatus(row) {
			const statusMap = {
				1: '离职',
				2: '入职',
				3: '岗位变更',
				4: '部门变更 ',
				5: '岗位/部门变更'
			}
			return statusMap[row.msgType]
		},
		//获取选中行ID数组
		selectionChange(val) {
			this.ids = []
			// 去重获取被选中的id值存入到数组中
			for (let selectedItem of val) {
				this.ids.push(selectedItem.id)
			}
			return this.ids
		},
		displaySelection(row) {
			return row.status !== 1
		}
	}
}
</script>

<style>
.header-btn-item {
	display: flex;
}

.read1 {
	color: #999999;
}

.read2 {
	color: #f5a21d;
}
</style>
